Promise.all(), map() with callback function gives 404 error on .catch (err => {}) in Reactjs.
I could call the endpoint and get the response but end up by getting the below 404 error on the callback. error request failed with status code 404 at createerror
Any suggestion how this logic should be handled.
Note: If I remove the query parameter from Axios (+ '?nbr=' + data.id) it works fine.... !!??
useEffect(() => {
const url_endpoint = `${url}/getData`
if (data != null) {
Promise.all(
data.map(async (data) =>
Axios.get(url_endpoint + '?nbr=' + data.id, {
headers: {
timestamp: 1111
}
})
.then(response => {
const { data } = response
if (response.status) {
responseCode = response.status
}
setLog({ 'status': 'success'})
callback({ error: false, data })
})
.catch(err => {
if (err.response) {
responseCode = err.response.status
}
setLog({'status': 'error'})
error({ 'responseCode': responseCode })
callback({ APIError: true })
})
)
}
}, [])You might want to use Promise.allSettled()
The
Promise.allSettled()method returns a promise that resolves after all of the given promises have either fulfilled or rejected, with an array of objects that each describes the outcome of each promise.
const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];
Promise.allSettled(promises).
then((results) => results.forEach((result) => console.log(result.status)));
// expected output:
// "fulfilled"
// "rejected"